<template>
    <div class="UserTable">
       <div class="data_wrap">
            <!-- 搜索 -->
            <div class = "search">
                <div class = "searchLeft">
                    <div style = "display: inline-block; margin-top:22px;">
                    <span>会议名称：</span>
                    <el-input v-model="queryParam.title" placeholder="请输入会议名称" style="width:154px;margin-right:20px" clearable></el-input>
                    </div>
                    <div style = "display: inline-block; margin-top:22px;">
                    <span>会议类型：</span>
                    <el-select v-model="queryParam.type" 
                        style="width:154px;margin-right:20px;height:36px">
                        <el-option
                        v-for = "item in tabsOption"
                        :key = "item.value"
                        :label = "item.label"
                        :value = "item.value"
                        ></el-option>
                    </el-select>
                    </div>
                    <div style = "display: inline-block; margin-top:22px;">
                    <span class = "demonstration">上传时间：</span>
                    <el-date-picker
                        placeholder = "开始日期"
                        style = "width:160px;margin-right:12px"
                        v-model = "queryParam.startLocalDate" 
                        :clearable = "false"
                        value-format="yyyy-MM-dd"
                        :picker-options="startPickerOptions"
                    ></el-date-picker>至
                    <el-date-picker
                        placeholder = "结束日期"
                        style = "width:160px;margin-left:12px"
                        v-model = "queryParam.endLocalDate"
                        :clearable = "false"
                        value-format="yyyy-MM-dd"
                        :picker-options="endPickerOptions"
                    ></el-date-picker>
                    </div>
                    <el-button
                        type = "primary"
                        style = "width:52px;margin-left: 20px;padding:0px;height:36px;margin-top:22px;"
                        @click = "query">查询</el-button>
                    <el-button 
                        style = "width:52px;margin-left: 12px;padding:0px;height:36px;margin-top:22px;" 
                        @click = "resetQueryParam">重置</el-button>
                </div>
                <el-button 
                    type = "primary"
                    v-if="this.permissionBycode.includes(this.code + '-tj')"
                    style = "width:80px;margin-left: 12px;padding:0px;height:36px;margin-top:22px;" 
                    @click = "uploadConference"><i class="el-icon-upload el-icon--left"></i>上传</el-button>
            </div>
            <!-- 表格 -->
            <div class="table_data">
                <tableComponent :tableData = "tableData" :tableLabel = "tableLabel" :tableOption = "tableOption" @delete = "deleteConference"/>
            </div>
            <!-- 分页 -->
            <div class="pagination_wrap">
                <el-pagination
                    background
                    @size-change = "handleSizeChange"
                    @current-change = "handleCurrentChange"
                    :page-sizes = "paginationPageSizes"
                    layout = "total, prev, pager, next, sizes,jumper"
                    :current-page.sync = "paginationParam.currentPage"
                    :page-size = "paginationParam.pageSize"
                    :total = "paginationParam.total"
                    style = "font-weight:400;"
                ></el-pagination>
            </div>
        </div> 
    </div>
</template>
<script>
let _that
export default {
    components: {
        tableComponent : () => import('../../comonComponent/table')
    },
    props:{
        permissionBycode: {
            type: Array,
            default: ()=>{
                return []
            }
        }
    },
    data () {
        return {
            code:'jdjb-dtjd-szyd_upload',
          // tab配置参数
            tabsOption: [
                { value: '0', label: '全部会议'},
                { value: '1', label: '党组织会议'},
                { value: '2', label: '总经理办公会议'},
                { value: '3', label: '董事会会议'}
            ],
            searchParam: {},
            // 搜索的配置参数
            queryParam: {
                title: '', // 会议名称
                type:'0', // 会议类型 
                startLocalDate: "", //支出时间开始时间
                endLocalDate: "" // 支出时间结束时间
            },
            paginationPageSizes: [10, 30, 50],
            paginationParam: {
                pageNum: 1,
                pageSize: 10,
                total: 0,
            },
            startPickerOptions: {
                disabledDate(time) {
                return _that.queryParam.endLocalDate ? (time.getTime() > new Date(_that.queryParam.endLocalDate).getTime()) : ''
                }
            },
            endPickerOptions: {
                disabledDate(time) {
                return _that.queryParam.startLocalDate ? (time.getTime() < new Date(_that.queryParam.startLocalDate).getTime()) : ''
                }
            },
            // 表格配置参数
            tableData: [],
            tableLabel: [
                { type : 'index',label : '序号', width : '60', minWidth: '50', fixed : false, render : false, align : 'center'},
                { prop : 'title', label : '会议名称', minWidth: '340', fixed : false, render : false, align : 'center'},
                { prop : 'type', label : '会议类型', minWidth: '210 ', fixed : false, render : false, align : 'center',
                render : (h, params, data) => {
                        let  typeValue = this.tabsOption.find(item => item.value === params.row.type)
                        return h( 'span', {}, typeValue ? typeValue.label : '')
                    } 
                },
                { prop : 'meetingTime', label : '会议时间' , minWidth: '220', fixed : false, render : false, align : 'center'},
                { prop : 'createdTime', label : '上传时间', minWidth: '220', fixed : false, render : false, align : 'center'},
                { prop : 'action', label : '操作', minWidth: '330', fixed : false, option: [], align : 'center', showDeletePopover: true,
                    render : (h, params, data) => { 
                        return h( 'span', {}, [ 
                            h("el-button", {style: {display:this.permissionBycode.includes(this.code + '-yl') ? '' : 'none'},  class:'', props:{ size: 'mini' }, on : {
                                click: () => {
                                this.doMeetingPreview(params.row.id)
                                }
                            } }, '预览' ), 
                            h("el-button", {style: {display:this.permissionBycode.includes(this.code + '-xz') ? '' : 'none'},  class:'', props: { type: 'primary', size: 'mini' }, on : {
                                click: () => {
                                this.doMeetingDownload(params.row.id)
                                }
                            } }, '下载'),
                        ])
                    } 
                }
            ],
            tableOption : {
                loading: false,
                stripe: false,
                highlightCurrentRow : false,
                border : true,
                height : 610,
                maxHeight : '',
                resizable: false,
                headerCellStyle: {lineHeight: '46px', background: '#FAFAFA', padding: 0 },
                cellStyle: {height: '50px', padding: 0 }
            }
        }
    },
    computed: {
        listCacheData(){
            let data =  {
                code:this.code,
                queryParam: this.queryParam,
                searchParam: this.searchParam,
                paginationParam: this.paginationParam
            }
            return data
        }
    },
    mounted() { 
        _that = this
        this.query()
        if(!this.permissionBycode.includes(this.code + '-yl') && !this.permissionBycode.includes(this.code + '-xz') && !this.permissionBycode.includes(this.code + '-sc')) {
            this.tableLabel.splice(5, 1)
        }
        if (this.permissionBycode.includes(this.code + '-sc'))  {
            this.tableLabel[5].showDeletePopover = true
        } else {
            this.tableLabel[5].showDeletePopover = false
        }
    },
    methods: {
        // 三重一大的数据列表数据获取
        queryData () {
            this.tabsOption.loading = true
            let data = JSON.parse(JSON.stringify(this.queryParam))
            data.pageSize = this.paginationParam.pageSize
            data.pageNum = this.paginationParam.pageNum
            data.type = data.type === '0' ? '' : data.type
            this.Api.getMeetingUploadPage(data).then(res => {
                if (res && res.code === '0') {
                    this.tableData = res.data.records
                    this.paginationParam.total = res.data.total
                    if (Math.ceil(this.paginationParam.total / this.paginationParam.pageSize) < this.paginationParam.pageNum) {
                        this.paginationParam.pageNum = Math.ceil(this.paginationParam.total / this.paginationParam.pageSize)
                        this.queryData()
                    }
                } else {
                    this.tableData = []
                    this.paginationParam.total = 0
                    this.$message.warning(res.message)
                }
                this.tabsOption.loading = false
            })
        },
        // 查询点击事件
        query() {
            this.queryData()
        },
        // 分页pageSize 改变触发事件 
        handleSizeChange(val) {
            this.paginationParam.pageSize = val
            this.queryData()
        },
        // 分页currentPage 改变触发事件
        handleCurrentChange(val) {
            this.paginationParam.pageNum = val
            this.queryData()
        },
        // 搜索栏重置事件
        resetQueryParam() {
            Object.assign(this.$data.queryParam, this.$options.data().queryParam)
            Object.assign(this.$data.paginationParam, this.$options.data().paginationParam)

            this.queryData()
        },
        // 上传事件
        uploadConference () {
            this.$router.push({path: '/index/SuperviseAndReport/Conference/ConferenceCreate', query:{type:'create'}})
        },
        // 删除事件
        deleteConference(column) {
            this.Api.doMeetingDelete({id:column.id}).then(res => {
                if (res && res.code === '0') {
                    this.$message.success('删除成功')
                    this.queryData()
                } else {
                    this.$message.warning(res.message)
                }
            })
        },
        // 下载会议附件
        doMeetingDownload(id) {
            this.Api.doMeetingDownload({id: id}).then(res => {
                if (res && res.code === '0') {

                } else {
                    this.$message.warning('会议附件下载失败')
                }
            })
        },
        // 预览会议文件
        doMeetingPreview(id) {
            this.Api.doMeetingPreview({id: id}).then(res => {
                if (res && res.code === '0') {
                    window.open(this.$store.state.PortalManagement.fileIp + res.data, '_blank');
                } else {
                    this.$message.warning('会议附件预览失败')
                }
            })
        },
    }
}
</script>
<style lang="less" scoped>
    .UserTable {
        .data_wrap {
            width:100%;
            display: flex;
            flex-direction: column;
            // 搜索
            .search {
                margin-bottom: 20px;
                width:100%;
                display: flex;
                /deep/ .el-input__inner {
                height: 36px;
                }
                /deep/.el-icon-date
                {
                line-height: 36px;
                position: absolute;
                    left: 120px;
                }
                /deep/.el-icon-arrow-up{
                line-height: 36px;
                }
                .searchLeft {
                    flex: 1;
                }
            }
            .table_data {
                flex: 1;
            }
            // 下拉框样式
            .pagination_wrap {
                display: flex;
                justify-content: flex-end;
                bottom: 0;
                right: 0;
                /deep/ .el-pagination {
                margin-top: 0;
                padding-top:20px;
                padding-bottom:20px;
                line-height: normal;
                }
            }
        }
    }
</style>